<template>
  <div class="product-container">
    <div class="left-menu">
      <h2>产品管理</h2>
      <Menu
        style="width: 200px; "
        :selected-keys="[reviewMenu]"
        mode="inline"
        @click="handleClickMenu"
      >
        <MenuItem v-for="{ dictLabel, dictValue } in dicts.productManageMenu" :key="dictValue">
          {{ dictLabel }}
        </MenuItem>
      </Menu>
    </div>

    <div class="table-container">
      <ProductLib v-if="reviewMenu == ProductManageMenu.ProductManage"></ProductLib>
      <ProductExamine v-else-if="reviewMenu == ProductManageMenu.ProductReview"></ProductExamine>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import Dictionary from '@/utils/dictionary';
  import { Menu, MenuItem } from 'ant-design-vue';
  import { ProductManageMenu } from '@/enums/productManage';
  import ProductLib from './ProductLib/index.vue';
  import ProductExamine from './ProductExamine/index.vue';

  const dicts = Dictionary.getLocalMulti([
    'productType',
    'productReviewStatus',
    'productManageMenu',
  ]);

  const reviewMenu = ref(ProductManageMenu.ProductManage);

  const handleClickMenu = ({ key }) => {
    reviewMenu.value = key;
  };
</script>

<style lang="less" scoped>
  .product-container {
    display: flex;
    padding-top: 10px;
    padding-left: 10px;

    .left-menu {
      background-color: white;

      h2 {
        padding: 10px 16px;
        padding-bottom: 0;
        font-weight: bold;
      }
    }
    .table-container {
      max-width: calc(100% - 200px);
    }
  }
</style>
